<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>首页</title>
  <link rel="stylesheet" href="../lib/layui/css/layui.css">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/index.css">

</head>

<body>
  <div class="header container">
    仿站电商平台
    <p class="off active">您好！<a href="./login.html">请登录</a></p>
    <p class="on ">你好！
      <span class="nickname">用户昵称</span>
      <button class="self">个人中心</button>
      <button class="logout">退出登录</button>
    </p>
  </div>
  <div class="list container"><a href="./list.html">购买商品</a></div>

  <!-- 如需重新渲染新图片,只需渲染#carousel 元素对一个内容即可-->
  <div class="layui-carousel container" id="carousel">

  </div>
 
  <script type="module">
    // 轮播图效果,注意不用修改此代码
    import '../lib/axios.js'
    import '../lib/layui/layui.js';

    var shop = layui.data('shop')

    if (!shop.nickname) {
      layui.$('.off').addClass('active').siblings().removeClass('active')
    } else {
      layui.$('.on').addClass('active').siblings().removeClass('active')
      layui.$('.nickname').text(shop.nickname)
    }

    axios.get('http://localhost:9000/carousel/list').then(res => {
      if (res.data.code === 1) {
        const images = res.data.list.map(item => `<div><img src="http://localhost:9000/${item.name}"></div>`).join('');

        // 动态构建轮播图的HTML内容
        const carouselHtml = `<div carousel-item>${images}</div>`;

        // 将动态内容插入到轮播图容器中
        document.querySelector('#carousel').innerHTML = carouselHtml;

        layui.carousel.render({
          elem: '#carousel', // 选择器
          width: '1200px', //设置容器宽度
          height: '600px',
          arrow: 'hover',
          anim: 'fade' //切换动画方式
        });
      }
    })

    layui.$(".self").click(function () {
      location.href = "./self.html"
    })

    layui.$(".logout").click(function () {
      var id = layui.data('shop').id
      axios.get(`http://localhost:9000/users/logout?id=${id}`, {
        headers: {
          'Authorization': layui.data('shop').token
        }
      }).then(res => {
        if (res.data.code === 1) {
          layui.data('shop', null)
          location.href = "./index.html"
        }
      })
    })

  </script>
</body>

</html>